<template>
    <!-- 总容器 -->
    <div class="wrapper">
        <header>
            <i class="fa fa-angle-left" onclick="history.go(-1)"></i>
            <p>我的预约</p>
            <div></div>
        </header>
        <div class="top-ban"></div>

        <ul>
            <li v-for="item in appointmentList" :key="item.orderid" >
                
                <div class="left" v-if="item.state==1">
                    <p>{{item.orderdate}}</p>
                    <p>{{item.name}}</p>
                </div>
                <div class="right" v-if="item.state==1" @click="cancelappointment(item.orderid)">
                    取消预约
                </div>
            </li>
        </ul>
        
        <div class="bottom-ban"></div>
        <footer>
            <ul>
                <li @click="()=>{router.push('/hospital')}">
                    <i class="fa fa-home"></i>
                    <p>云医院</p>
                </li>
                <li @click="()=>{router.push('/setmeal')}">
                    <i class="fa fa-opencart"></i>
                    <p>商城</p>
                </li>
                <li @click="()=>{router.push('/index')}">
                    <i class="fa fa-compass"></i>
                    <p>发现</p>
                </li>
                <li @click="()=>{router.push('/personal')}">
                    <i class="fa fa-user"></i>
                    <p>我</p>
                </li>
            </ul>
        </footer>
    </div>
    
</template>

<script setup>
import { appointmentApi, cancelappointmentApi } from "@/api/Orders";
import { getHospitalApi } from "@/api/Hospital"; 
import { computed, onMounted } from 'vue'
import router from '../router'
import { ref } from 'vue'
import bottom from '../components/bottom.vue'

    const appointmentList = ref([])

    const cancelappointment = async (id) => {
        const response = await cancelappointmentApi(id)
        if (response.code === 200){
            appointmentList.value = response.data
            alert("取消成功")
            router.push('/appointmentcancel')
        }else{
            alert("取消失败")
        }
    }

    const getDetail = async (hpId,smId,orderdate,name) => {
        const form = {
            hpname:'',
            smname:name,
            date:orderdate,
            telephone:'',
            deadline:'',
            address:'',
            businesshours:''
        }
        const response = await getHospitalApi(hpId)
        if (response.code === 200){
            form.address = response.data.address
            form.deadline = response.data.deadline
            form.businesshours = response.data.businesshours
            form.telephone = response.data.telephone
            form.hpname = response.data.name
            sessionStorage.setItem('orderdetail',JSON.stringify(form))
            router.push('/confirmorder')
        }else{
            alert("获取失败")
        }
    }

    onMounted(async() => {
        const response = await appointmentApi(JSON.parse(sessionStorage.getItem("userInfo")).userid)
        
        if (response.code === 200){
            appointmentList.value = response.data
           
        }else{
            alert("获取预约列表失败")
        }
    })
</script>

<style src="../assets/css/appointmentlist.css" scoped>
</style>